<template>
  <div class="order">
    <div class="header">
      <div class="form">
        <el-form>
          <el-form-item>
            <el-input v-model="keywords" placeholder="请输入订单编号" clearable>
              <el-button slot="append" icon="el-icon-search" @click="getOrderByKeyWords"/>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table">
      <el-table :data="list" border fit>
        <el-table-column label="编号" align="center">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>

        <el-table-column label="订单编号" align="center">
          <template slot-scope="scope">
            {{ scope.row.order_id }}
          </template>
        </el-table-column>

        <el-table-column label="商品数量" align="center">
          <template slot-scope="scope">
            {{ scope.row.count }}
          </template>
        </el-table-column>

        <el-table-column label="订单金额（元）" align="center">
          <template slot-scope="scope">
            {{ scope.row.total }}
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.created_at }}
          </template>
        </el-table-column>

        <el-table-column label="更新时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.updated_at }}
          </template>
        </el-table-column>

        <!-- <el-table-column label="商品背景图" align="center" width="200">
          <template slot-scope="scope">
            <img :src="scope.row.image_url" width="100" height="100"/>
          </template>
        </el-table-column> -->

        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.status| checkstatus }}
          </template>
        </el-table-column>

        <el-table-column label="付款方式" align="center">
          <template slot-scope="scope">
            {{ scope.row.pay_type == 0? '余额': '' }}
          </template>
        </el-table-column>

        <el-table-column label="送货方式" align="center">
          <template slot-scope="scope">
            {{ scope.row.send_type | send_type}}
          </template>
        </el-table-column>

        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="150" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="toOrderDetail(scope.row.order_id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
    :total="total"
    :page.sync="listQuery.page"
    :limit.sync="listQuery.limit"
    @pagination="getList" />
  </div>
</template>
<script>
import orderApi from '@/api/order.js'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      keywords: '', // 搜索关键字
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  filters: {
    checkstatus(val) {
      switch (val) {
        case 0:
          val = '待付款'
          break
        case 1:
          val = '待收货'
          break
        case 2:
          val = '已完成'
          break
        case 3:
          val = '已取消'
          break
        case 4:
          val = '已删除'
        default:
          break
      }
      return val
    },
    send_type(val) {
      switch (val) {
        case 0:
          val = '送货上门'
          break
        case 1:
          val = '自取'
          break
        default:
          break;
      }
      return val
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取全部订单
    async getList(e) {
      this.list = []
      const query = {}
      if(e == undefined) {
        query.page = this.listQuery.page - 1,
        query.limit = this.listQuery.limit
      }
      else {
        query.page = e.page - 1,
        query.limit = e.limit
      }
      const result = await orderApi.getAllOrder(query)
      this.list = result.data.rows
      this.total = result.data.count
    },
    // 根据搜索关键字获取订单
    async getOrderByKeyWords() {
      if(this.keywords) {              //搜索关键字不为空
        const query = {}
        if(Number(this.keywords)) {
          query.order_id = this.keywords
        }
        const result = await orderApi.getOrderByKeyWords(query)
        if(result.code == 0) {
          this.list = []
          this.list = result.data
        }
      }else {                        // 搜索关键字为空
        this.getList()
      }
    },
    // 跳转详情
    toOrderDetail(id) {
      this.$router.push(
        {
          name: 'OrderDetail',
          params: {id: id}
        }
      )
    }
  },
  inject: ['reload']
}
</script>
<style lang="less" scoped>
  .order {
    margin: 30px;
    position: relative;
    .header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
</style>
